<template>
  <div id="chart3">
    <el-table :data="props.data" border>
      <el-table-column prop="Question6" min-width="30%%" align="center">
        <template #header>
          <span>{{ $t('Tab.Chart3.Inline_Def_Top3') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Quantity6" min-width="10%" align="center">
        <template #header>
          <span>{{ $t('Tab.Chart3.Qty') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Percent6"
        :label="$t('Tab.Chart3.Rate')"
        min-width="10%"
        align="center"
      ></el-table-column>
      <el-table-column prop="Question9" min-width="30%" align="center">
        <template #header>
          <span>{{ $t('Tab.Chart3.Endline_Def_Top3') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Quantity9" min-width="10%" align="center">
        <template #header>
          <span>{{ $t('Tab.Chart3.Qty') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Percent9"
        :label="$t('Tab.Chart3.Rate')"
        min-width="10%"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { IChart3Data } from '@/interface/index';

const props = defineProps<{
  data: Array<IChart3Data>;
}>();
</script>

<style lang="scss" scoped>
div#chart3 {
  height: 100%;
}
:deep(.el-table) {
  background-color: #000000;
  .el-table__cell {
    height: 150px;
    background-color: #000000;
    color: #ffffff;
    padding: 0px;
    .cell {
      line-height: 150px;
      font-size: xx-large;
      padding: 0px;
    }
  }
}
</style>
@/types
